<template>
  <div class="tabItem">
    <div class="tabs" v-for="(tabs, index) in tabs"
    :key="index"
    :class="{active: index === activeIndex}"
    @click="activeHandler(index)">
     <span>{{tabs}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: ['tabs'],
  data () {
    return {
      activeIndex: 0
    }
  },
  methods: {
    activeHandler (index) {
      this.activeIndex = index
      this.$emit('changeIndex', index)
    }
  }
}
</script>
<style scoped>
.tabItem {
  display: flex;
}
.tabs {
  flex: 1;
}
.active {
  color: red;
}
.active span {
  border-bottom: 5px solid red;
  padding: 10px 5px;
}
</style>
